const path = require('path')
const webpack = require('webpack');  // 这个插件不需要安装，是基于webpack的，需要引入webpack模块
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入HtmlWebpackPlugin插件
const {CleanWebpackPlugin}  = require('clean-webpack-plugin')
module.exports = {
    // 入口文件
    entry: path.join(__dirname, '/src/js/index.js'),
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    devServer:{
        contentBase: "./dist", // 本地服务器所加载文件的目录
        port: "8088",   // 设置端口号为8088
        inline: true, // 文件修改后实时刷新
        historyApiFallback: true, //不跳转
        hot: true // 热更新
    },
    // 会生成对于调试的完整的.map文件，但同时也会减慢打包速度
    devtool:'source-map',
    module: {
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader'],
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),  // new一个插件的实例
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "/src/pages/index.html")// new一个这个插件的实例，并传入相关的参数
        }),
        new CleanWebpackPlugin({
            root: path.resolve(__dirname, 'dist/'),
            dry: false // 启用删除文件
        }),  //在每次构建前 所要清理的文件夹名称
        new webpack.HotModuleReplacementPlugin() // 热更新插件
    ]
}
